<template>
  <div class="app-container">
    <div style="display: flex;justify-content: center">
      <el-input v-model="keyword" size="small" placeholder="通过用户名搜索用户..." prefix-icon="el-icon-search" style="width: 400px;margin-right: 10px" />
      <el-button type="primary" icon="el-icon-search" size="small" @click="getAll">搜索</el-button>
    </div>
    <div class="main">
      <el-card v-for="(item,index) in list" :key="index" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ item.name }}</span>
          <el-button style="float: right; padding: 3px 0;color: #F56C6C" type="text" icon="el-icon-delete" @click="handleDelete(item)" />
        </div>
        <div>
          <div class="avatar"><img :src="item.userface" :alt="item.name" :title="item.name" class="avatar-img"></div>
          <div class="user-info">
            <div>用户名：{{ item.name }}</div>
            <div>手机号码：{{ item.telephone }}</div>
            <div>地址：{{ item.address }}</div>
            <div>用户状态：<el-switch v-model="item.enabled" active-color="#13ce66" @change="toggleEnabled(item)" /></div>
            <div>
              角色：
              <el-tag v-for="(subItem,subIndex) in item.roles" :key="subIndex" size="mini" style="margin-right: 5px">{{ subItem.nameZh }}</el-tag>
              <el-popover
                placement="right"
                title="角色列表"
                width="200"
                trigger="click"
                @show="showPopover(item)"
                @hide="hidePopover(item)"
              >
                <div>
                  <el-select v-model="selectedRoles" multiple size="small" placeholder="请选择角色...">
                    <el-option
                      v-for="(roleItem,roleIndex) in roles"
                      :key="roleIndex"
                      :label="roleItem.nameZh"
                      :value="roleItem.id"
                    />
                  </el-select>
                </div>
                <el-button slot="reference" type="text" size="mini" icon="el-icon-more" />
              </el-popover>
            </div>
            <div>备注：{{ item.remark }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { GetAll, Update, GetAllRole, UpdateHrRole, Delete } from '@/api/Sys/SysHr/Hr'

export default {
  name: 'SysHr',
  data() {
    return {
      keyword: '',
      list: [],
      roles: [],
      selectedRoles: []
    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
    getAll() {
      const url = 'keyword=' + this.keyword + '&'
      GetAll(url).then((res) => {
        if (res) {
          this.list = res
        }
      })
    },
    toggleEnabled(e) {
      delete e.roles
      Update(e).then((res) => {
        if (res) {
          this.getAll()
        }
      })
    },
    showPopover(e) {
      this.GetAllRole()
      const roles = e.roles
      this.selectedRoles = []
      roles.forEach(element => {
        this.selectedRoles.push(element.id)
      })
    },
    GetAllRole() {
      GetAllRole().then((res) => {
        if (res) {
          this.roles = res
        }
      })
    },
    hidePopover(e) {
      var roles = []
      Object.assign(roles, e.roles)
      var flag = false
      if (roles.length !== this.selectedRoles.length) {
        flag = true
      } else {
        for (let i = 0; i < roles.length; i++) {
          const role = roles[i]
          for (let j = 0; j < this.selectedRoles.length; j++) {
            const roleId = this.selectedRoles[j]
            if (role.id === roleId) {
              roles.splice(i, 1)
              i--
              break
            }
          }
        }
        if (roles.length !== 0) {
          flag = true
        }
      }
      if (flag) {
        let url = 'hrId=' + e.id + '&'
        this.selectedRoles.forEach(element => {
          url = url + 'rids=' + element + '&'
        })
        UpdateHrRole(url).then((res) => {
          if (res) {
            this.getAll()
          }
        })
      }
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除【' + row.name + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Delete(row.id).then((res) => {
          if (res) {
            this.getAll()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .box-card {
    width: 350px;
  }

  .avatar {
    width: 100%;
    display: flex;
    justify-content: center;

    .avatar-img {
      width: 64px;
      height: 64px;
      border-radius: 64px;
    }
  }

  .user-info {
    margin-top: 10px;
    font-size: 12px;
    color: #409EFF;

    div {
      line-height: 24px;
      height: 24px;
    }
  }
}
</style>
